<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to Login</title>
    <LINK REL="SHORTCUT ICON" HREF="resource/images/iotch-logo.png" />

    <!-- Font Awesome -->
    <link href="resource/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- NProgress -->
    <link href="resource/vendors/nprogress/nprogress.css" rel="stylesheet" type="text/css">
    <!-- Animate.css -->
    <!--<link href="https://colorlib.com/polygon/gentelella/css/animate.min.css" rel="stylesheet">-->
    <!-- Custom Theme Style -->
    <link href="resource/build/css/custom.min.css" rel="stylesheet" type="text/css">

    <link href="resource/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="resource/validate/css/bootstrapValidator.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" src="resource/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="resource/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="resource/validate/js/bootstrapValidator.js"></script>
    <!--调整图标位置-->
    <style>
        .has-feedback .form-control-feedback {
            margin-top: 0;
            top: 0;
            right: 0;
        }
        .form-horizontal .has-feedback .form-control-feedback {
            margin-top: 0;
            top: 0;
            right: 15px;
        }

        .help-block {
            margin-top: -20px;
            text-align: left;
        }

        input .form-control{
            margin-bottom: 10px;
        }
    </style>


</head>
<body class="login">
<div>
    <a class="hiddenanchor" id="signup"></a>
    <a class="hiddenanchor" id="signin"></a>

    <div class="login_wrapper">
        <div class="animate form login_form">
            <section class="login_content">
                <form id="login_form">
                    <h1>
                        欢迎登陆天瞳商城
                    </h1>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="用户编码" required="required" name="usercode" id="usercode" />
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="密码" required="required" name="userpassword" id="userpassword"/>
                    </div>
                    <!--<div class="form-group">
                        <table width="100%">
                            <tr>
                                <td width="50%">
                                    <input type="password" class="form-control" placeholder="验证码" required="required" name="captcha" id="captcha"/>
                                </td>
                                <td width="50%" align="center" valign="middle">
                                    <img id="captcha_img" alt="点击更换" onclick="changeVerifyCode(this)" src="Kaptcha" class="m" />
                                </td>
                            </tr>
                        </table>
                    </div>-->
                    <div class="form-group">
                        <button class="btn btn-primary submit" id="login_btn">登 陆</button>
                        <button class="btn btn-info reset" id="reset_btn">重 置</button>
                        <!--<a class="reset_pass" href="#">忘记密码了?</a>-->
                    </div>

                    <div class="clearfix"></div>

                    <div class="separator">
                        <!--<p class="change_link">我是新人?
                            <a href="#signup" class="to_register"> 创建账户 </a>
                        </p>-->

                        <div class="clearfix"></div>
                        <br/>

                        <div>
                            <h1><i class="fa fa-paw"></i> Iotch Mall System!</h1>
                            <p>©2018 All Rights Reserved. Iotch Company! </p>
                            <p>产品服务解释权归属天瞳智能有限公司所有</p>
                        </div>
                    </div>
                </form>
            </section>
        </div>

        <div id="register" class="animate form registration_form">
            <section class="login_content">
                <form>
                    <h1>Create Account</h1>
                    <div>
                        <input type="text" class="form-control" placeholder="Username" required="" />
                    </div>
                    <div>
                        <input type="email" class="form-control" placeholder="Email" required="" />
                    </div>
                    <div>
                        <input type="password" class="form-control" placeholder="Password" required="" />
                    </div>
                    <div>
                        <a class="btn btn-default submit" href="index.html">Submit</a>
                    </div>

                    <div class="clearfix"></div>

                    <div class="separator">
                        <p class="change_link">Already a member ?
                            <a href="#signin" class="to_register"> Log in </a>
                        </p>

                        <div class="clearfix"></div>
                        <br />

                        <div>
                            <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                            <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>
<script type="text/javascript">
    var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var projectName = pathName.substr(0,index+1);

</script>
<script type="text/javascript">
    function changeVerifyCode(img) {
        img.src = "Kaptcha?" + Math.floor(Math.random() * 100);
    }
    function kaihuo() {
        var a = "bb";
        $.ajax({
            url : "shop/test",
            type : "get",
            dataType : 'json',
            success : function(data) {
                alert(data);
            }
        });
    }
</script>
<script type="text/javascript">
    $(function(){

         $('#login_form').bootstrapValidator({
             live: 'enabled',
             message: 'This value is not valid',
             feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 usercode: {
                     message: '用户名无效',
                     validators: {
                         notEmpty: {
                             message: '用户名不能位空'
                         },
                         stringLength: {
                             min: 4,
                             max: 30,
                             message: '用户名必须大于6，小于30个字'
                         },
                         regexp: {
                             regexp: /^[a-zA-Z0-9_\.]+$/,
                             message: '用户名只能由字母、数字、点和下划线组成'
                         },
                         different: {
                             field: 'userpassword',
                             message: '用户名和密码不能相同'
                         }
                     }
                 },
                 userpassword: {
                     validators: {
                         notEmpty: {
                             message: '密码不能位空'
                         },
                         different: {
                             field: 'usercode',
                             message: '用户名和密码不能相同'
                         }
                     }
                 }
             }
         });

        // Validate the form manually
        $('#login_btn').click(function() {
            $('#login_form').data('bootstrapValidator').validate();
            var flag = $('#login_form').data('bootstrapValidator').isValid();
            //$('#login_form').bootstrapValidator('validate');

            if(flag){

                $.ajax({
                    type:"POST",
                    url:"/userInfo/login",
                    data:$('#login_form').serialize(),
                    dateType:"json",
                    success:function(result){
                        var obj = JSON.parse(result);
                        if(obj.success){
                            document.location.href = projectName+"/userInfo/home";
                        }
                    },
                    error:function () {
                        alert("登录请求出错,请稍后再试!");
                    }
                });

            }
        });

        $("#reset_btn").click(function () {
            $('#login_form').data('bootstrapValidator').resetForm(true);
        });

    })

</script>
</body>
</html>